<template>
    <div>
      <img :src="img" class="web-banner">
      <div class="breadcrumb-main">
        <div class="breadcrumb-inner">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/web/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>成交公告</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="web-inner-main">
        <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadList(true)"/>
       <web-list
        :key="keys"
        :tableData="tables.tableData"
        @on-details-click="detailsClick"
        @on-search-click="loadList"
        :tableLabel="tables.tableLabel" 
        :models="tables" />
      </div>


      <el-dialog title="中标信息" :visible.sync="visible" width="1200px">
        <table class="custom-table" style="margin-bottom:10px">
          <tr>
            <td class="tr-title">发布时间</td><td colspan="3">{{details.gsTime | ellipsis}}</td>
        </tr>
        <tr>
          <td class="tr-title">项目名称</td><td>{{details.name}}</td>
          <td class="tr-title">采购单号</td><td>{{details.purchaseCode}}</td>
        </tr>
        <tr>
          <td class="tr-title">采购商</td><td>{{details.dept?details.dept.unitName:''}}</td>
          <td class="tr-title">供应商</td><td>{{details.winningSupplierName | substringsis}}</td>
        </tr>
      </table>
     
      <template v-if="details.projectType === '1'">
        <el-table :data="details.purchaseGoodsDetail" style="width: 100%;" stripe>
          <el-table-column prop="name" label="物资名称"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
          <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
        </el-table>
      </template>
      
      <template v-if="details.projectType === '2'">
        <el-table :data="details.purchaseGoodsDetail" style="width: 100%;" stripe>
          <el-table-column prop="name" label="劳务名称"></el-table-column>
          <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
          <el-table-column prop="remarks" label="备注"></el-table-column>
        </el-table>
      </template>
    </el-dialog>

    </div>
  </template>
  <script>
  import {getWebBidList,getWebBidDetails} from "@/api/web_api"
  import { ACCESS_TOKEN } from "@/config/common"
  import moment from 'moment'
  import banner_img from "@/assets/home_banner.jpg"
  import { PARAMS_INQUIRY,LABEL_NOTICE,OPTION_INLINE} from "./webModel/web_form"
  import webList from "./webModel/web_model_list"
  export default {
    name:"webNotice",
    components:{
      webList
    },
    data() {
      return {
        img:banner_img,
        keys:0,
        params:{
          fApi:{},
          rule:PARAMS_INQUIRY,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          tableData:[],
          tableLabel: LABEL_NOTICE
        },
        page:{
          pageNum:1,
          pageSize:10,
        },
        visible:false,
        details:{}
      };
    },
    filters: {
      ellipsis (value) {
        if (!value) {
          return ''
        }
        return moment(value).format("YYYY-MM-DD")
      },
      substringsis(val){
        if (!val) {
          return ''
        }
        return "*******公司" 
      }
    },
    mounted() {
      // let hasToken = sessionStorage.getItem(ACCESS_TOKEN);
      // if(hasToken){
      //   this.loadList(true);
      // }else{
      //  this.tables.tableData = [];
      // }
      // this.$nextTick(()=>{
      //   this.params.fApi.setValue({"name":""});
      // })
    },
    methods: {
      async loadList(formData) {
        let params = {};
        let query = this.params.fApi.bind();
        params.name = query.name;
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.pageNum;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.gsFlag = '1';
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const {code,data} = await getWebBidList(params);
        if(code === 200){
          this.tables.tableData = data.list;
          this.tables.total = data.total;
        }else{
          this.tables.tableData = [];
        }
      },
      async detailsClick(row){
        const {code,data} = await getWebBidDetails(row.id);
        if(code === 200){
            data.purchaseGoodsDetail = data.purchaseGoodsDetail === '' ? []:JSON.parse(data.purchaseGoodsDetail);
            this.details = data;
            this.visible =true;
        }
      }
    }
  };
  </script>
  <style>
    
  </style>